<template>
     <div    class="order">

        <Header   title="订单" ></Header>
         <div class="content">

           <van-tabs  color="#ffc400" >
               <van-tab   v-for=" it  in NavData "  :title="it">
                    <div  v-if= " it === '全部' && store.state.orderListed.length "    v-for=" it  in store.state.orderListed">
                        <van-card :num="it.num"
                                :price="it.price"    
                                :title="it.title"
                                :thumb="it.pic"/>
                    </div>


                   <Blank  v-else></Blank>

                </van-tab>

           </van-tabs>


         </div>
         <Footer/>
    </div>
</template>

<script>

import Footer from '../../components/Footer.vue'
import Header from '../../components/Header.vue'
import Blank from '../../components/Blank.vue'
import {useStore} from "vuex"

import {  reactive,toRefs} from 'vue'
    export default {
        components:{
        Footer,  
        Header,
        Blank
     }, 

   
     setup(){
              let  store =   useStore()
            let  data = reactive({
                 NavData:['全部','交易完成','待付款','待发货','已发货']
            })

      return {
             ...toRefs(data),
             store
      }
     }
    }
</script>

<style lang="less" scoped>
            .order{
            display: flex;
            flex-flow: column;
            height: 100%;
              .content{
                flex: 1;
                overflow-y: auto;
                //overflow-x:hidden ;
              } 
          }
</style>